<template>
  <div class="menu-wrapper">
    <el-form ref="shopForm" :model="form" label-width="100px" :rules="rules">
      <div
        style="
          width: 100%;
          display: flex;
          align-items: flex-end;
          border-bottom: 1px #eee solid;
          margin-bottom: 20px;
        "
      >
        <span style="font-size: 18px; color: #409eff; margin: 10px 0"
          >添加菜品信息</span
        >
      </div>
      <el-form-item label="菜品名称" prop="name">
        <el-col :span="8">
          <el-input v-model="form.name" />
        </el-col>
      </el-form-item>

      <div class="second" style="display: flex">
        <el-form-item label="摘要" prop='thumbnail'>
          <single-upload style="width: 145px" v-model="form.thumbnail" />
        </el-form-item>
        <el-form-item label="" prop="subTitle" class="subTitle">
          <el-col :span="5">
            <!-- <el-input v-model="form.subTitle" /> -->
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.subTitle"
              style="width: 180px; height:140px;margin-left:-53px"
            >
            </el-input>
          </el-col>
        </el-form-item>
      </div>

      <!-- <el-form-item label="地理位置" prop="address">
        <el-col :span="8">
          <el-input v-model="form.address" />
        </el-col>
      </el-form-item> -->
      <el-form-item label="烹任时长" prop="timeLen">
        <el-col :span="8">
          <el-input v-model="form.timeLen" />
        </el-col>
      </el-form-item>
      <el-form-item label="口味" prop="flavor">
        <el-col :span="8">
          <el-input v-model="form.flavor" />
        </el-col>
      </el-form-item>
      <el-form-item label="上手难度" prop="difficulty">
        <el-col :span="8">
          <el-select v-model="form.difficulty" clearable placeholder="请选择" >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-form-item>
       <el-form-item label="分类" prop="">
            <el-cascader
              v-model="calssvalue"
              :options="Classification"
              :props="props"
              style="width: 200px"
           
            >
            </el-cascader>
          </el-form-item>

      <el-form-item label="菜谱介绍" prop="content">
        <el-col :span="8">
          <div class="el-form-item__content">
            <tinymce v-model="form.content" :height="300" :width="950" />
          </div>
          <!-- <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.content"></el-input> -->
        </el-col>
      </el-form-item>

      <div class="photo-content">
        <div style="margin-top: 20px" class="photo-content-span">
          <span style="font-size: 18px; color: #409eff">轮播图</span>
        </div>
     
          <multi-upload v-model="form.billFareMeta.images" />
      
      </div>

        <div class="video-content">
          <div  class="video-content-span">
            <span style="font-size: 18px; color: #409eff; margin: 10px 0"
              >视频介绍</span
            >
          </div>

            <video-upload v-model="form.billFareMeta.video" />

        </div>
    

      <div class="complete">
        <el-form-item>
          <el-button
            type="primary"
            :loading="clicked"
            @click="saveshop('shopForm')"
            >&nbsp&nbsp完 成&nbsp&nbsp</el-button
          >
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<style scoped>
/deep/ .el-textarea__inner{
  height: 100%;
}
.complete {
  margin-top: 40px;
  margin-left: -60px;
}
.second .el-form-item label {
  text-align: left !important;
}
.menu-wrapper {
  margin: 15px;
}
.photo-content {
  width: 100%;
  /* display: flex;
  align-items: flex-end; */
  margin-left: 50px;
  margin-bottom: 40px;
}
.photo-content .photo-content-span {
  margin-bottom: 20px;
}
/deep/.el-upload__tip {
  display: none;
}
/deep/ .el-upload--picture-card {
  width: 50px !important;
  height: 50px !important;
  line-height: 50px !important;
  text-align: center;
}
.video-content {
  margin-left: 40px;
  margin-top: 60px;
  margin-bottom: 40px;
}
.video-content-span {
  margin-bottom: 20px;
}
.secific {
  margin-top: 30px;
}
.el-form-item__content {
  margin-top: 50px;
  margin-left: -50px;
}
</style>
<script>
import { list as classlist } from "@/api/billFareCategory";
import MultiUpload from "@/components/Upload/multiUpload";
import VideoUpload from "@/components/Upload/videoUpload";
import SingleUpload from "@/components/Upload/singleUpload";
import permission from "@/directive/permission/index.js"; // 权限判断指令
import { EventBus } from "@/api/eventBus";
import utils from "../../utils/utils.js";
import { save } from "@/api/variety";
import Tinymce from "@/components/Tinymce";
export default {
  name: "variety-add",
  directives: { permission },
  filters: {},
  components: {
    MultiUpload,
    VideoUpload,
    SingleUpload,
    Tinymce,
  },
  data() {
    return {
       calssvalue:[],
      props: {
        value: "id",
        label: "name",
        children: "childrens",
      },
      Classification: [], //分类列表
      options: [
        {
          value: 1,
          label: "1",
        },
        {
          value: 2,
          label: "2",
        },
        {
          value: 3,
          label: "3",
        },
        {
          value: 4,
          label: "4",
        },
        {
          value: 5,
          label: "5",
        },
      ],
      value:'',
      clicked: false, // 按钮防双击
      form: {
        id: "",
        name: "",
        content: "",
        difficulty: "",
        flavor: "",
        subTitle: "",
        timeLen: "",
        thumbnail: "",
        billFareCategoryId:'',
        billFareMeta: {
          images: [],
          video: "",
        },
      },
      rules:{
        thumbnail:[{ required: true, message: '请选择摘要图', trigger: 'blur' }]
      }
    };
  },
  created() {
    this.getclassification()
  },
  watch: {
    // 路由地址不变的情况下,如果id变化则重新获取数据
    $route(newVal, oldVal) {
      console.log(newVal);
      if (newVal.name == "variety-add" && newVal.query.id != this.id) {
        this.getData();
      }
    },
  },
  methods: {
     getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].childrens.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].childrens = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].childrens);
        }
      }
      return data;
    },
   // 获取分类列表
    getclassification() {
      let params = new URLSearchParams();
      // params.append("scopeType", this.form.scopeType);
      classlist(params).then((res) => {
        this.Classification = this.getTreeData(res.data);
        // this.Classification = res.data;
        console.log(res);
      });
    },
    saveshop(form) {
      const _this = this;
      this.$refs[form].validate((valid) => {
        if (valid) {
          // 校验表单
          _this.clicked = true;

          console.log(_this.form);
            this.form.billFareCategoryId = this.calssvalue[this.calssvalue.length - 1];
          save(_this.form)
            .then((response) => {
              console.log(response);

              _this.clicked = false;

              EventBus.$emit("variety-add", response.data);
              _this.$store
                .dispatch("tagsView/delView", _this.$route)
                .then(({ visitedViews }) => {
                  _this.$router.push({
                    path: "/variety/list",
                  });
                }); // 关闭当前tab回到列表
            })
            .catch((error) => {
              _this.clicked = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // saveshop(form){
    //   console.log(this.form);

    // }
  },
};
</script>
